<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Create Account</title>
        <link href="css/global.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/global.js"></script>
    </h:head>
    <h:body>
    <div id="background">
    <div class="navy">
        
    </div>
        <div id="content">
            <div id="createAccountDIV">
                <span class="whiteHeader">Create Account</span><br/><br/>
                <h:form id="Form">
                    <h:panelGrid columns="2">
                        <h:outputLabel for="usernameInput"><span class="white">Enter your username: </span></h:outputLabel>
                        <h:inputText id="usernameInput" value="#{accountBean.newLoginName}" >
                            <f:ajax event="keyup" render="output" listener="#{accountBean.verifyLoginName}"/>
                        </h:inputText>
                    </h:panelGrid>
                    <h:panelGrid>
                        <h:outputText id="output" value="#{accountBean.checkLoginNameString}" style="color:#{accountBean.loginNameColor};"/>
                    </h:panelGrid>
                    <h:panelGrid columns="2">
                        <h:outputLabel for="passwordInput"><span class="white">Enter your password: </span></h:outputLabel>
                        <h:inputSecret id="passwordInput" value="#{accountBean.newPassword}">
                            <f:ajax event="keyup" listener="#{accountBean.verifyPassword()}"/>
                        </h:inputSecret>
                            
                        <h:outputLabel for="passwordreInput"><span class="white">Re-enter your password: </span></h:outputLabel>
                        <h:inputSecret id="passwordreInput" value="#{accountBean.rePassword}">
                            <f:ajax event="keyup" render="output1" listener="#{accountBean.verifyPassword()}"/>
                        </h:inputSecret>
                    </h:panelGrid>
                    <h:panelGrid>
                        <h:outputText id="output1" value="#{accountBean.checkPasswordString}" style="color:#{accountBean.passwordColor};"/>
                    </h:panelGrid>
                    <h:panelGrid columns="2">
                        <h:outputLabel for="emailInput"><span class="white">Enter your email: </span></h:outputLabel>
                        <h:inputText id="emailInput" value="#{accountBean.newEmail}">
                            <f:ajax event="keyup" render="output2" listener="#{accountBean.verifyEmail}"/>
                        </h:inputText>
                    </h:panelGrid>
                    <h:panelGrid>
                        <h:outputText id="output2" value="#{accountBean.checkEmailString}" style="color:#{accountBean.emailColor};"/>
                    </h:panelGrid>
                    <h:panelGrid>
                        <h:commandButton type="submit" styleClass="short" action="#{accountBean.createAccount}" value="Submit">
                            
                        </h:commandButton>
                    </h:panelGrid>
                </h:form>
            </div>
        </div>
    </div>
    </h:body>
</html>
